<template>
  <div class="overflow-scroll style11">
    <div class="head">
      <div class="item" v-for="item in moneyTypeList" :key="item.id">
        <div class="title" :style="{ backgroundColor: item.color }">
          {{ item.title }}
        </div>
        <div class="money">
          <count-to  :start-value="0" :end-value="item.money" :decimals="2" class="text-30px  dark:text-dark" />
        </div>
      </div>
    </div>
    <n-card title="" :bordered="false" class="h-full rounded-8px shadow-sm">
      <div class="flex-col h-full">
        <n-space class="pb-12px" justify="space-between">
          <n-space>
            <n-date-picker v-model:formatted-value="year_month" value-format="yyyy-MM" type="month" clearable />
            <n-button type="primary" @click="handleAddTable"> 查询 </n-button>
          </n-space>
          <n-space align="center" :size="18">
            <n-button size="small" type="primary" @click="getTableData()">
              <icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
              刷新表格
            </n-button>
            <column-setting v-model:columns="columns" />
          </n-space>
        </n-space>
        <n-data-table remote :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" flex-height
          class="flex-1-hidden" />
      </div>
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { reactive, ref } from "vue";
import type { Ref } from "vue";
import { NButton, NPopconfirm, NSpace, NTag } from "naive-ui";
import type { DataTableColumns, PaginationProps } from "naive-ui";
import { selectCaiwuList, selectCaiwuData,applyWithdrawal } from "@/service";
import { useBoolean, useLoading } from "@/hooks";
import ColumnSetting from "./components/column-setting.vue";
import { useRouter } from "vue-router";

const { loading, startLoading, endLoading } = useLoading(false);
const { bool: visible, setTrue: openModal } = useBoolean();
const router = useRouter();

const columns: Ref<DataTableColumns<any>> = ref([
  {
    key: "before_income",
    title: "分成前前收益",
    align: "center",
  },
  {
    key: "income",
    title: "收益",
    align: "center",
  },
  {
    key: "income",
    title: "提现金额",
    align: "center",
  },
  {
    key: "status",
    title: "提现状态",
    align: "center",
    render: (row: any) => {
      switch (row.status) {
        case 0:
          return <div>未体现</div>
        case 1:
          return <div style="color: orange;">申请中</div>
        case 2:
          return <div style="color: green;">提现成功</div>
        case 3:
          return <div style="color: red;">拒绝</div>
        default:
          return null
      }
    }
  },
  {
    key: "year_month",
    title: "月份",
    align: "center",
  },
  {
    key: 'transfer_records',
    title: '转账截图',
    align: 'center',
    render: (row: any) => {
      return (
        <n-image
          width="50"
          lazy
          src={row.transfer_records}
        />
      );
    }
  },
  {
    key: "actions",
    title: "操作",
    align: "center",
    render: (row: any) => {
      if(row.status == 0 || row.status == 3) {
        return (
          <NSpace justify={"center"}>
            <NButton size={"small"} onClick={() => handleEditTable(row)}>
              数据详情
            </NButton>
            <NPopconfirm onPositiveClick={() => tixian(row)}>
              {{
                default: () => '确认申请',
                trigger: () => <NButton size={'small'}>申请提现</NButton>
              }}
            </NPopconfirm>
          </NSpace>
        );
      }else {
        return (
          <NSpace justify={"center"}>
            <NButton size={"small"} onClick={() => handleEditTable(row)}>
              数据详情
            </NButton>
          </NSpace>
        );
      }
    },
  },
]) as Ref<any>;


async function tixian(row: any) {
  startLoading();
  console.log(row);
  let params =  {
    id: row.id
  }
  let res:any = await applyWithdrawal(params)
  console.log(res);
  if(res.code == 0) {
    window.$message?.success('申请成功!');
  }
  endLoading();
  getTableData()
}

let year_month: any = ref(null);
// 查询
function handleAddTable() {
  // console.log(year_month);
  pagination.page = 1
  getTableData();
}
// 详情
function handleEditTable(row: any) {
  console.log(row);
  router.push({
    path: "/financial-tgs/details",
    query: {
      year_month: row.year_month,
    },
  });
}
const tableData = ref<any>([]);
async function getTableData() {
  startLoading();
  let params = {
    page: pagination.page,
    page_size: pagination.pageSize,
    year_month: year_month.value,
  };
  const { data } = await selectCaiwuList(params);
  // console.log(data);
  if (data) {
    tableData.value = data.item;
    pagination.itemCount = data.total;
    endLoading();
  }
}

// 分页
const pagination: PaginationProps = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 15, 20, 25, 30],
  onChange: (page: number) => {
    pagination.page = page;
    getTableData();
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
    getTableData();
  },
});

let moneyTypeList = ref([
  {
    id: "tixian",
    color: "#2f4056",
    title: "提现金额",
    money: 0.0,
  },
  {
    id: "account",
    color: "#149bff",
    title: "账户金额",
    money: 0.0,
  },
  {
    id: "totalIncome",
    color: "#998831",
    title: "总收益",
    money: 0.0,
  },
]);
async function getSelectCaiwuData() {
  let { data } = await selectCaiwuData();
  if (data) {
    moneyTypeList.value = [
      {
        id: "tixian",
        color: "#2f4056",
        title: "提现金额",
        money: Number(data.totalIncome) - Number(data.account),
      },
      {
        id: "account",
        color: "#149bff",
        title: "账户金额",
        money: Number(data.account),
      },
      {
        id: "totalIncome",
        color: "#998831",
        title: "总收益",
        money: Number(data.totalIncome),
      },
    ];
  }
}

function init() {
  getTableData();
  getSelectCaiwuData();
}

// 初始化
init();
</script>

<style scoped>
.style11::-webkit-scrollbar {
  display: none;
}

.head {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.item {
  min-width: 200px;
  margin-right: 30px;
  transition: all 0.3s;
}

.item:hover {
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
  transform: scale(1.05);
}

.title {
  padding: 10px 0;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.money {
  border: 1px solid #ccc;
  border-top: none;
  padding: 20px 0;
  text-align: center;
  background-color: #fff;
  font-weight: bold;
  color: #333;
}
</style>
